<script setup lang="ts">
import markdownClass from "@/components/markdown/markdownClass.ts";
interface MyMarkdownProps{
  modelValue ?: string,
  height ?: number,
  placeholder ?: string
}
const props = withDefaults(defineProps<MyMarkdownProps>(),{
  modelValue:'',
  height:300,
  placeholder:'请输入内容'
})
const emit = defineEmits(['update:modelValue']);
nextTick(()=>{
  const markdownOjb = new markdownClass('#editor',`${props.height}px`,`${props.placeholder}`);
  markdownOjb.editor.on('change',(type:string)=>{
   const content = type == 'markdown' ? markdownOjb.editor.getMarkdown() : markdownOjb.editor.getHTML();
    emit('update:modelValue',content);
  });
  const els = document.getElementsByClassName('toastui-editor-mode-switch');
  const el = els[0] as HTMLDivElement;
  el.style.display = 'none'
})
</script>

<template>
<div id="editor">

</div>
</template>

<style lang="scss" scoped>
    #editor{
      @apply bg-white rounded;

    }
</style>